<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="description" content="Responsive Admin Template" />
    <meta name="author" content="SmartUniversity" />
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
	<!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
	<!--bootstrap -->
	<link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
	<link th:href="@{/assets/plugins/summernote/summernote.css}" rel="stylesheet">
	<!-- morris chart -->
    <link th:href="@{/assets/plugins/morris/morris.css}" rel="stylesheet" type="text/css" />
    <!-- Material Design Lite CSS -->
	<link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
	<link rel="stylesheet" th:href="@{/assets/css/material_style.css}">
	<!-- animation -->
	<link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
	<!-- Template Styles -->
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css" />
	<!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" />
 </head>
 <!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
    <div class="page-wrapper">
        <!-- start header -->
        <div th:replace="~{commons::headnavbar}"></div>
        <!-- end header -->
        <!-- start page container -->
        <div class="page-container">
 			<!-- start sidebar menu -->
			<div th:replace="~{commons::sidebar(active='index',open='indexing')}"></div>

			<!-- end sidebar menu -->
			<!-- start page content -->
            <div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title">Dashboard</div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li class="active">Dashboard</li>
                            </ol>
                        </div>
                    </div>
                   <!-- start widget -->
					<div class="state-overview">
						<div class="row">
					        <div class="col-xl-3 col-md-6 col-12">
					          <div class="info-box bg-blue">
					            <span class="info-box-icon push-bottom"><i class="material-icons">style</i></span>
					            <div class="info-box-content">
					              <span class="info-box-text">Orders</span>
					              <span class="info-box-number">450</span>
					              <div class="progress">
					                <div class="progress-bar width-60"></div>
					              </div>
					              <span class="progress-description">
					                    60% Increase in 28 Days
					                  </span>
					            </div>
					            <!-- /.info-box-content -->
					          </div>
					          <!-- /.info-box -->
					        </div>
					        <!-- /.col -->
					        <div class="col-xl-3 col-md-6 col-12">
					          <div class="info-box bg-orange">
					            <span class="info-box-icon push-bottom"><i class="material-icons">card_travel</i></span>
					            <div class="info-box-content">
					              <span class="info-box-text">New Booking</span>
					              <span class="info-box-number">155</span>
					              <div class="progress">
					                <div class="progress-bar width-40"></div>
					              </div>
					              <span class="progress-description">
					                    40% Increase in 28 Days
					                  </span>
					            </div>
					            <!-- /.info-box-content -->
					          </div>
					          <!-- /.info-box -->
					        </div>
					        <!-- /.col -->

					        <!-- /.col -->
					        <div class="col-xl-3 col-md-6 col-12">
					          <div class="info-box bg-success">
					            <span class="info-box-icon push-bottom"><i class="material-icons">monetization_on</i></span>
					            <div class="info-box-content">
					              <span class="info-box-text">Total Earning</span>
					              <span class="info-box-number">13,921</span><span>$</span>
					              <div class="progress">
					                <div class="progress-bar width-60"></div>
					              </div>
					              <span class="progress-description">
					                    60% Increase in 28 Days
					                  </span>
					            </div>
					            <!-- /.info-box-content -->
					          </div>
					          <!-- /.info-box -->
					        </div>
					        <!-- /.col -->
					      </div>
						</div>
					<!-- end widget -->
                     <!-- chart start -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-box">
                                <div class="card-head">
                                    <header>Chart Survey</header>
                                    <div class="tools">
                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
										<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
										<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                    </div>
                                </div>
                                <div class="card-body no-padding height-9">
                                    <div class="row text-center">
			                            <div class="col-sm-3 col-6">
			                                <h4 class="margin-0">$ 209 </h4>
			                                <p class="text-muted"> Today's Income</p>
			                            </div>
			                            <div class="col-sm-3 col-6">
			                                <h4 class="margin-0">$ 837 </h4>
			                                <p class="text-muted">This Week's Income</p>
			                            </div>
			                            <div class="col-sm-3 col-6">
			                                <h4 class="margin-0">$ 3410 </h4>
			                                <p class="text-muted">This Month's Income</p>
			                            </div>
			                            <div class="col-sm-3 col-6">
			                                <h4 class="margin-0">$ 78,000 </h4>
			                                <p class="text-muted">This Year's Income</p>
			                            </div>
			                        </div>
                       				<div class="row">
                                       	<div id="area_line_chart" class="width-100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                     <!-- Chart end -->
<!--                    <div class="row">-->
<!--                        <div class="col-md-4 col-sm-12 col-12">-->
<!--                            <div class="card bg-info">-->
<!--			                    <div class="text-white py-3 px-4">-->
<!--			                      <h6 class="card-title text-white mb-0">Page View</h6>-->
<!--			                      <p>7582</p>-->
<!--			                      <div id="sparkline26"></div>-->
<!--			                      <small class="text-white">View Details</small>-->
<!--			                    </div>-->
<!--			                  </div>-->
<!--			                  <div class="card bg-success">-->
<!--			                    <div class="text-white py-3 px-4">-->
<!--			                      <h6 class="card-title text-white mb-0">Earning</h6>-->
<!--			                      <p>3669.25</p>-->
<!--			                      <div id="sparkline27"></div>-->
<!--			                      <small class="text-white">View Details</small>-->
<!--			                    </div>-->
<!--			                  </div>-->
<!--                        </div>-->
<!--                        <div class="col-md-4 col-sm-12 col-12">-->
<!--                        	<div class="card  card-box">-->
<!--                                <div class="card-head">-->
<!--                                    <header>Notifications</header>-->
<!--                                    <div class="tools">-->
<!--                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>-->
<!--	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>-->
<!--	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="card-body no-padding height-9">-->
<!--                                    <div class="row">-->
<!--                                        <div class="noti-information notification-menu">-->
<!--                                            <div class="notification-list mail-list not-list small-slimscroll-style">-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-primary"> <i class="fa fa-user-o"></i>-->
<!--												</span> <span class="text-purple">Abhay Jani</span> Added you as friend-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>Just Now</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon blue-bgcolor"> <i class="fa fa-envelope-o"></i>-->
<!--												</span> <span class="text-purple">John Doe</span> send you a mail-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>Just Now</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-success"> <i class="fa fa-check-square-o"></i>-->
<!--												</span> Success Message-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small> 2 Days Ago</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-warning"> <i class="fa fa-warning"></i>-->
<!--												</span> <strong>Database Overloaded Warning!</strong>-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>1 Week Ago</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-primary"> <i class="fa fa-user-o"></i>-->
<!--												</span> <span class="text-purple">Abhay Jani</span> Added you as friend-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>Just Now</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon blue-bgcolor"> <i class="fa fa-envelope-o"></i>-->
<!--												</span> <span class="text-purple">John Doe</span> send you a mail-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>Just Now</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-success"> <i class="fa fa-check-square-o"></i>-->
<!--												</span> Success Message-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small> 2 Days Ago</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-warning"> <i class="fa fa-warning"></i>-->
<!--												</span> <strong>Database Overloaded Warning!</strong>-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>1 Week Ago</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:;" class="single-mail"> <span class="icon bg-danger"> <i class="fa fa-times"></i>-->
<!--												</span> <strong>Server Error!</strong>-->
<!--                                                    <span class="notificationtime">-->
<!--                                                        <small>10 Days Ago</small>-->
<!--                                                    </span>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--											<div class="full-width text-center p-t-10" >-->
<!--												<button type="button" class="btn purple btn-outline btn-circle margin-0">View All</button>-->
<!--											</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="col-md-4 col-sm-12 col-12">-->
<!--                            <div class="card  card-box">-->
<!--                                <div class="card-head">-->
<!--                                    <header>Earning</header>-->
<!--                                    <div class="tools">-->
<!--                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>-->
<!--	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>-->
<!--	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="card-body no-padding height-9">-->
<!--                                    <div class="row text-center">-->
<!--			                            <div class="col-sm-4 col-6">-->
<!--			                                <h4 class="margin-0">$ 209 </h4>-->
<!--			                                <p class="text-muted"> Today</p>-->
<!--			                            </div>-->
<!--			                            <div class="col-sm-4 col-6">-->
<!--			                                <h4 class="margin-0">$ 837 </h4>-->
<!--			                                <p class="text-muted">This Week</p>-->
<!--			                            </div>-->
<!--			                            <div class="col-sm-4 col-6">-->
<!--			                                <h4 class="margin-0">$ 3410 </h4>-->
<!--			                                <p class="text-muted">This Month</p>-->
<!--			                            </div>-->
<!--			                        </div>-->
<!--			                        <div class="row">-->
<!--                                        <div id="donut_chart" class="width-100 height-250"></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                     &lt;!&ndash; start Payment Details &ndash;&gt;-->
<!--                    <div class="row">-->
<!--                        <div class="col-md-12 col-sm-12">-->
<!--                            <div class="card  card-box">-->
<!--                                <div class="card-head">-->
<!--                                    <header>Booking Details</header>-->
<!--                                    <div class="tools">-->
<!--                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>-->
<!--	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>-->
<!--	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="card-body ">-->
<!--                                  <div class="table-wrap">-->
<!--										<div class="table-responsive">-->
<!--											<table class="table display product-overview mb-30" id="support_table5">-->
<!--												<thead>-->
<!--													<tr>-->
<!--														<th>No</th>-->
<!--														<th>Name</th>-->
<!--														<th>Check In</th>-->
<!--														<th>Check Out</th>-->
<!--														<th>Status</th>-->
<!--														<th>Phone</th>-->
<!--														<th>Room Type</th>-->
<!--														<th>Edit</th>-->
<!--													</tr>-->
<!--												</thead>-->
<!--												<tbody>-->
<!--													<tr>-->
<!--														<td>1</td>-->
<!--														<td>Jens Brincker</td>-->
<!--														<td>23/05/2016</td>-->
<!--														<td>27/05/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-success">paid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Single</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>2</td>-->
<!--														<td>Mark Hay</td>-->
<!--														<td>24/05/2017</td>-->
<!--														<td>26/05/2017</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-warning">unpaid </span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Double</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>3</td>-->
<!--														<td>Anthony Davie</td>-->
<!--														<td>17/05/2016</td>-->
<!--														<td>21/05/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-success ">paid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Queen</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>4</td>-->
<!--														<td>David Perry</td>-->
<!--														<td>19/04/2016</td>-->
<!--														<td>20/04/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-danger">unpaid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>King</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>5</td>-->
<!--														<td>Anthony Davie</td>-->
<!--														<td>21/05/2016</td>-->
<!--														<td>24/05/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-success ">paid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Single</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>6</td>-->
<!--														<td>Alan Gilchrist</td>-->
<!--														<td>15/05/2016</td>-->
<!--														<td>22/05/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-warning ">unpaid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>King</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>7</td>-->
<!--														<td>Mark Hay</td>-->
<!--														<td>17/06/2016</td>-->
<!--														<td>18/06/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-success ">paid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Single</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--													<tr>-->
<!--														<td>8</td>-->
<!--														<td>Sue Woodger</td>-->
<!--														<td>15/05/2016</td>-->
<!--														<td>17/05/2016</td>-->
<!--														<td>-->
<!--															<span class="label label-sm label-danger">unpaid</span>-->
<!--														</td>-->
<!--														<td>123456789</td>-->
<!--														<td>Double</td>-->
<!--														<td>-->
<!--															<a href="edit_booking.html" class="btn btn-tbl-edit btn-xs">-->
<!--																<i class="fa fa-pencil"></i>-->
<!--															</a>-->
<!--															<button class="btn btn-tbl-delete btn-xs">-->
<!--																<i class="fa fa-trash-o "></i>-->
<!--															</button>-->
<!--														</td>-->
<!--													</tr>-->
<!--												</tbody>-->
<!--											</table>-->
<!--										</div>-->
<!--									</div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    &lt;!&ndash; end Payment Details &ndash;&gt;-->
<!--                    <div class="row">-->
<!--							<div class="col-lg-8 col-md-12 col-sm-12 col-12">-->
<!--                                   <div class="card-box ">-->
<!--                                <div class="card-head">-->
<!--                                    <header>Guest Review</header>-->
<!--                                    <div class="tools">-->
<!--                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>-->
<!--	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>-->
<!--	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="card-body ">-->
<!--                                  <div class="row">-->
<!--                                        <ul class="docListWindow small-slimscroll-style">-->
<!--                                            <li>-->
<!--                                            	<div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user1.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">Rajesh Mishra</a>-->
<!--		                                                        <p class="rating-text">Awesome!!! Highly recommend</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star_half</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user2.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">Sarah Smith</a>-->
<!--		                                                        <p class="rating-text">Very bad service :(</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star_half</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user3.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">John Simensh</a>-->
<!--		                                                        <p class="rating-text"> Staff was good nd i'll come again</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user4.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">Priya Sarma</a>-->
<!--		                                                        <p class="rating-text">The price I received was good value.</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star_half</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user5.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">Serlin Ponting</a>-->
<!--		                                                        <p class="rating-text">Not Satisfy !!!1</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <div class="row">-->
<!--	                                            	<div class="col-md-8 col-sm-8">-->
<!--		                                                <div class="prog-avatar">-->
<!--		                                                    <img src="assets/img/user/user6.jpg" alt="" width="40" height="40">-->
<!--		                                                </div>-->
<!--		                                                <div class="details">-->
<!--		                                                    <div class="title">-->
<!--		                                                        <a href="#">Priyank Jain</a>-->
<!--		                                                        <p class="rating-text">Good....</p>-->
<!--		                                                    </div>-->
<!--		                                                </div>-->
<!--	                                                </div>-->
<!--	                                                <div class="col-md-4 col-sm-4 rating-style">-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star</i>-->
<!--		                                                <i class="material-icons">star_half</i>-->
<!--		                                                <i class="material-icons">star_border</i>-->
<!--	                                                </div>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <div class="full-width text-center p-t-10" >-->
<!--												<a href="#" class="btn purple btn-outline btn-circle margin-0">View All</a>-->
<!--											</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--							</div>-->
<!--							<div class="col-lg-4 col-md-12 col-sm-12 col-12">-->
<!--                             <div class="card-box">-->
<!--                                 <div class="card-head">-->
<!--                                     <header>Todo List</header>-->
<!--                                     <button id = "panel-button"-->
<!--				                           class = "mdl-button mdl-js-button mdl-button&#45;&#45;icon pull-right"-->
<!--				                           data-upgraded = ",MaterialButton">-->
<!--				                           <i class = "material-icons">more_vert</i>-->
<!--				                        </button>-->
<!--				                        <ul class = "mdl-menu mdl-menu&#45;&#45;bottom-right mdl-js-menu mdl-js-ripple-effect"-->
<!--				                           data-mdl-for = "panel-button">-->
<!--				                           <li class = "mdl-menu__item"><i class="material-icons">assistant_photo</i>Action</li>-->
<!--				                           <li class = "mdl-menu__item"><i class="material-icons">print</i>Another action</li>-->
<!--				                           <li class = "mdl-menu__item"><i class="material-icons">favorite</i>Something else here</li>-->
<!--				                        </ul>-->
<!--                                 </div>-->
<!--                                 <div class="card-body ">-->
<!--                                 	<ul class="to-do-list ui-sortable" id="sortable-todo">-->
<!--                                            <li class="clearfix">-->
<!--                                                <div class="todo-check pull-left">-->
<!--                                                    <input type="checkbox" value="None" id="todo-check1">-->
<!--                                                    <label for="todo-check1"></label>-->
<!--                                                </div>-->
<!--                                                <p class="todo-title">Add fees details in system-->
<!--                                                </p>-->
<!--                                                <div class="todo-actionlist pull-right clearfix">-->
<!--                                                    <a href="#" class="todo-remove"><i class="fa fa-times"></i></a>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li class="clearfix">-->
<!--                                                <div class="todo-check pull-left">-->
<!--                                                    <input type="checkbox" value="None" id="todo-check2">-->
<!--                                                    <label for="todo-check2"></label>-->
<!--                                                </div>-->
<!--                                                <p class="todo-title">Announcement for holiday-->
<!--                                                </p>-->
<!--                                                <div class="todo-actionlist pull-right clearfix">-->
<!--                                                    <a href="#" class="todo-remove"><i class="fa fa-times"></i></a>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li class="clearfix">-->
<!--                                                <div class="todo-check pull-left">-->
<!--                                                    <input type="checkbox" value="None" id="todo-check3">-->
<!--                                                    <label for="todo-check3"></label>-->
<!--                                                </div>-->
<!--                                                <p class="todo-title">call bus driver</p>-->
<!--                                                <div class="todo-actionlist pull-right clearfix">-->
<!--                                                    <a href="#" class="todo-remove"><i class="fa fa-times"></i></a>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li class="clearfix">-->
<!--                                                <div class="todo-check pull-left">-->
<!--                                                    <input type="checkbox" value="None" id="todo-check4">-->
<!--                                                    <label for="todo-check4"></label>-->
<!--                                                </div>-->
<!--                                                <p class="todo-title">School picnic</p>-->
<!--                                                <div class="todo-actionlist pull-right clearfix">-->
<!--                                                    <a href="#" class="todo-remove"><i class="fa fa-times"></i></a>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                            <li class="clearfix">-->
<!--                                                <div class="todo-check pull-left">-->
<!--                                                    <input type="checkbox" value="None" id="todo-check5">-->
<!--                                                    <label for="todo-check5"></label>-->
<!--                                                </div>-->
<!--                                                <p class="todo-title">Exam time table generate-->
<!--                                                </p>-->
<!--                                                <div class="todo-actionlist pull-right clearfix">-->
<!--                                                    <a href="#" class="todo-remove"><i class="fa fa-times"></i></a>-->
<!--                                                </div>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                 </div>-->
<!--                             </div>-->
<!--                         </div>-->
<!--						</div>-->
                </div>
            </div>
            <!-- end page content -->
			<div th:replace="~{commons::settingtools}"></div>
        </div>
        <!-- end page container -->
        <!-- start footer -->
		<div th:replace="~{commons::footer}"></div>
        <!-- end footer -->
    </div>
    <!-- start js include path -->
    <script src="assets/plugins/jquery/jquery.min.js" ></script>
    <script src="assets/plugins/popper/popper.min.js" ></script>
    <script src="assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script>
	<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- bootstrap -->
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
    <script src="assets/plugins/sparkline/jquery.sparkline.min.js" ></script>
	<script src="assets/js/pages/sparkline/sparkline-data.js" ></script>
    <!-- Common js-->
	<script src="assets/js/app.js" ></script>
    <script src="assets/js/layout.js" ></script>
    <script src="assets/js/theme-color.js" ></script>
    <!-- material -->
    <script src="assets/plugins/material/material.min.js"></script>
    <!-- animation -->
    <script src="assets/js/pages/ui/animations.js" ></script>
    <!-- morris chart -->
    <script src="assets/plugins/morris/morris.min.js" ></script>
    <script src="assets/plugins/morris/raphael-min.js" ></script>
    <script src="assets/js/pages/chart/morris/morris_home_data.js" ></script>
    <!-- end js include path -->
  </body>
</html>
